<template>
    <!-- App Bottom Menu -->
    <div class="appBottomMenu">
        <div :class="{'item':true,'active':isActive('/index')}" @click="goPage('/index')">
            <div class="col-2 text-large">
                <i class="ion ion-md-bookmarks"></i>
            </div>
        </div>
        <div :class="{'item':true,'active':isActive('/article')}" @click="goPage('/article')">
            <div class="col-2 text-large">
                <i class="ion ion-md-color-wand"></i>
            </div>
        </div>
        <div :class="{'item':true,'active':isActive('/home')}" @click="goPage('/home')">
            <div class="col-2 text-large">
                <i class="ion ion-md-person"></i>
            </div>
        </div>
    </div>
    <!-- * App Bottom Menu -->
</template>

<style scoped lang="scss">
</style>

<script>
import {defineComponent, onActivated, onMounted, onUpdated, watch} from "vue";
import {useRouter} from "vue-router";

export default defineComponent({
  name:'Footermenu',
  setup(){
    const router = useRouter()
    const cur = router.currentRoute.value.path
    function goPage(page){
      router.push(page)
    }

    function isActive(path){
      return cur === path
    }

    return {
      goPage,
      isActive
    }
  }
})
</script>